<template>
<div class="menu">
    <my-hearder></my-hearder>
    <main style="background-color:#f2f2f2">
    <div class="ph">
        <span>.<a href="">我的</a><a>></a><a>看房清单</a></span>
    </div>
    <div class="qdmain">
        <div><span class="qdchoose">房源清单</span><span>看房行程</span></div>
        <div @click='all' ><span :class="{'allchoose':delete1}">批量删除</span><span :class="{'allchoose':show}">批量预约</span></div>
    </div>
    <div class="qdzhu">
        <ul >
            <li v-for="str,i of data" :key="i" >
             <div>
             <div @click='red' :data-lid='str.hid' :data-status='qq[i]' :data-num='i' :class="{'red':qq[i]}"  :style="{'position':'absolute','background-color':'white','width':'30px','height':'30px','border-radius':'2px','display':(delete1||show?'block':'none'),}"></div>
                    <img :src="pic[i][0]" alt="" @click='tiao' :data-num='str.hid'>
                 <div class="qdtext">
                     <span style='font-weight: bold;font-size: 19px;'>{{str.sname}}</span>
                     <span>{{str.qname}} - {{str.s_yu}}</span>
                     <span style='font-size: 25px;'>{{str.hprice}}元</span>
                 </div>
                </div>
               <div style='text-indent: 10px;
    padding: 10px 0;color:#979798;font-size:16px'><span style="display: inline-block;
    width: 14px; background-image:url('/img/dizhi3x.png');background-repeat: no-repeat;
    background-position: 0 3px;color:white">.</span> {{str.h_dtinfo}}</div>
    <div style='text-indent: 10px;'> <span class='qdlist' v-for='p,k of tags[i]' :key='k' >{{p}}</span></div>
            </li>
        </ul>
        <div class='qdbig' :style="{display:(delete1||show?'block':'none')}"><div style='width: 100px;
    float: left;'><span class='abc' :style="{'background-color':(dian?'#ee3843':'white')}" @click='qdall'>.</span> <span style='display: inline-block;
    color: white;
    font-size: 14px;
    line-height: 58px;
    height: 58px;text-indent: 5px;' >全选</span></div>
    <div style='    height: 58px;
    float: left;
    width: 100px;
    text-align:center;
    line-height: 58px;
    font-size: 14px;
    color: white;
    text-indent: 0;
    font-weight: bold;'>已选中{{num}}套</div>
    <div class='xu' @click='delqd'>{{delete1?'删除':'我要看房'}}</div>
    <div class='xu' @click='qxbj' style='float:right'>取消编辑</div>
    </div>
    </div>
    </main>
    <my-footer></my-footer>
    </div>
</template>
<script>
import MyFooter from '../components/MyFooter.vue'
import MyHearder from '../components/OtherHeader.vue'
import {mapState} from 'vuex'
export default {
    data(){
        return{
            data:[],
            tags:[],
            pic:[],
            delete1:false,
            show:false,
            qq:[],
            num:0,
            dian:false,
            xuanzhong:[],
            hid:[]
        }
    },
  components: { MyFooter, MyHearder },
  mounted() {
      this.loda()
  },
  computed:{
      ...mapState(['uid'])
  },
  methods: {
      loda(){
this.axios.get('/v1/user/goods',{params:{l_uid:this.uid}}).then(res=>{
          if(res.data.code==200){
            this.data=res.data.msg;
            this.tags = [];
            this.pic=[];
            this.status=[];
            this.hid=[]
            for(let i of this.data){
                this.qq.push(false)
                this.hid.push(i.hid)
               var pic = i.purl.split('|')
               var str = i.htags.split('/');
               this.tags.push(str);
               this.pic.push(pic)
            }
          }
          console.log(res.data)
      })

      },
      tiao(e){
         this.$router.push(`/search/detail?lid=${e.target.dataset.num}`)
      },
      all(e){
          if(e.target.nodeName=='SPAN'){
              for(var i=0;i<this.qq.length;i++){
                 if(this.qq[i]){
                     this.qq[i]=false;
                 }
                 this.num=0;
             }
             if(e.target.innerText=='批量删除'){
                 
                 this.delete1 = true;
                 this.show = false;
             }else{
                 this.delete1 = false;
                 this.show = true;
             }
          }
      },
      qxbj(){
          this.delete1=false;
          this.show=false
      },
      delqd(e){
         if(e.target.innerText=='删除'){
          var str=''
         for(var i of this.xuanzhong){
           if(i==this.xuanzhong[this.xuanzhong.length-1]) {
                str+=i
            }else{str+=i+','}
             
         }
        this.axios.post('/v1/user/update',`goods=${str}&uid=${this.uid}`).then(res=>{
            if(res.data.code==200){
                this.delete1=false
                this.xuanzhong=[];
                this.loda();
                (function scrollWindow(){
  window.scrollTo(0,0);
})();
            }else{
                console.log(res.data)
            }
        })}
      },
      qdall(){
         this.dian=!this.dian
         if(this.dian){
             for(var i=0;i<this.qq.length;i++){
                 if(!this.qq[i]){
                     this.qq[i]=true;
                 }
             }
             this.delete1 = false;
        this.delete1 = true;
        this.num=this.qq.length  
         }else{
             for(var i=0;i<this.qq.length;i++){
                 if(this.qq[i]){
                     this.qq[i]=false;
                 }
             }
             this.delete1 = false;
        this.delete1 = true;
        this.num=0
         }
         
      },
      red(e){
         
        this.qq[e.target.dataset.num] = !this.qq[e.target.dataset.num];
        this.delete1 = false;
        this.delete1 = true;
        this.num='';
        for(let i of this.qq){
            if(i){this.num++}
        }
        this.xuanzhong=[]
        for(var i=0;i<this.qq.length;i++){
             if(!this.qq[i]){
                 this.xuanzhong.push(this.hid[i])
             }
         }        
        console.log(this.xuanzhong)
      }
  },
    
}
</script>

<style>
.abc{
    display: inline-block;
    width: 20px;
    height: 20px;
    background-color: white;
    border-radius: 5px;line-height:30px;
}
.qdbig{
    height:58px;background-color:#3b3d42;text-indent:20px;font-size:0
}
.qdzhu .xu{
float: left;
    margin: 10px 20px;
    height: 38px;
    font-size: 14px;
    line-height: 38px;
    width: 84px;
    text-align: center;
    text-indent: 0;
    background-color: #ee3843;
    border-radius: 2px;
    color: white;
}
.red{
    background-image:url('/img/red_choose.png')
}
.qdmain .allchoose{
    color:#ee3843
}
.menu .ph{
    margin: 0 auto;
    width: 1190px;
    height: 60px;
    position: relative;
}
.menu .ph>span{
    color: #f2f2f2;
    display: inline-block;
    width: 300px;
    position: absolute;
    left: 0;
    height: 60px;
    background-image: url('/img/dizhi3x.png');
    background-repeat: no-repeat;
    background-position: 0 21px;
    text-indent: 10px;
}
.menu .ph>span>a{
   display: inline-block;
   height: 60px;
   line-height: 60px;
   text-decoration: none;
   font-size:14px ;
   color: #666666;
}
.qdmain{
    background-color: white;
    width: 1190px;
    margin: 0 auto;
   border-bottom: 2px solid #ee3843;
}
.qdmain::after{
    content: '';
    display: block;
    clear: both;
}
.qdmain>div:first-child{
    float: left;
}
.qdmain>div:last-child{
    float: right;
}
.qdmain>div>span{
    display: inline-block;
    padding: 10px 20px;
    font-size: 16px;
}
.qdmain>div>span:hover{
    cursor:pointer
}
.qdzhu{
    width: 1190px;
    margin: 0 auto;
    margin-top: 30px;
}
.qdchoose{
    background-color: #ee3843;
    color:white;
}
.qdzhu .xu:hover{
    cursor:pointer;
    background-color:#d62c37
}
.qdzhu>ul>li{
   float: left;
    width: 380px;
    height: 370px;
    margin-right: 25px;
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 5px;
}
.qdzhu>ul>li:hover{
     box-shadow: 0px 0px 5px 0px #2e2d2d;
    cursor: pointer;
}
.qdzhu .qdlist{
    background-color:#eff6fa;
    margin-top: 0;
    text-align: center;
    color:#379ac7;
    text-indent: 0;
    padding: 0 4px;
    border-radius: 2px;
    font-size:14px;
    margin-right:10px
}
.qdzhu .qdlist:first-child{
    background-color:#ffeaea;
    color:#f7646e;
}
.qdzhu>ul{
    width: 1215px;
}
.qdzhu>ul::after{
    content: '';
    display: block;
    clear: both;
}
.qdzhu>ul>li>div{
position: relative;
 width: 100%;
}
.qdzhu>ul>li div>img{
     width: 380px;
    height: 280px;
    border-radius:5px 5px 0 0;
}
.qdzhu>ul>li div>img:hover{
    cursor: pointer;
}
.qdtext{
    position: absolute;
    bottom: 6px;
    width: 100%;
    height: 60px;
    line-height: 60px;
    background-color: rgba(0,0,0,0.6);
    color:white
}
.qdtext>span{
    display: inline-block;
    height: 60px;
    line-height: 60px;
    width: 126px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-indent:10px;
    font-size:14px;
    text-align:center
}
</style>